<template>
    <div>
    <el-row>
      <el-col :span="20"><div>
        <div style="margin-top: 20px"> 
            <el-button @click="callForm">新增</el-button>
          </div>
      </div></el-col>

      <el-col :span="4"><div>
        <div style="margin-top: 20px"> 
          <el-input
          placeholder="请输入关键字"
          icon="search"
          v-model="page.search"
          @keyup.enter.native="handleIconClick"
          :on-icon-click="handleIconClick">
        </el-input>
      </div>
    </div></el-col>


      <el-col :span="24"><div>
        <div style="margin-top: 20px"> 
            <el-table
                 @selection-change="handleSelectionChange"
                :data="tableData"
                border
                stripe
                style="width: 100%">

                    <el-table-column
                      type="selection"
                      width="55">
                    </el-table-column>
                <el-table-column
                  prop="id"
                  label="用户ID"
                  width="180">
                </el-table-column>
                <el-table-column
                  prop="userName"
                  label="用户名"
                  width="180">
                </el-table-column>
                <el-table-column
                  prop="lastLogin"
                  label="上次登录时间">
                </el-table-column>
                <el-table-column
                  prop="status"
                  label="状态"
                    :formatter="formatter"
                  >
                </el-table-column>

                </el-table-column>
                <el-table-column label="操作">
                  <template scope="scope">
                    <el-button
                      size="small"
                      @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button
                      size="small"
                      type="danger"
                      @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
          </div>
      </div></el-col>
    </el-row>

    <div class="block" style="float:right;">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="page.pageNo"
          :page-size="page.pageSize"
          layout="total, prev, pager, next"
          :total="page.count">
        </el-pagination>
      </div>



      <el-dialog :title="addForm.dialogTitle" :visible.sync="addForm.dialogFormVisible" size="tiny">
        <el-form :model="formData" :inline="true"  label-position="left" >
          <el-form-item label="用户名：" :label-width="addForm.formLabelWidth">
            <el-input v-model="formData.user.userName" auto-complete="off"></el-input>
          </el-form-item>
        </el-form>

        <div style="margin: 15px 0;"></div>
        <el-checkbox-group v-model="formData.roleIds">
          <el-checkbox v-for="role in roleList.list" :label="role.id" :key="role.id">{{role.name}}</el-checkbox>
        </el-checkbox-group>

        <div slot="footer" class="dialog-footer">
          <el-button @click="cancelFrom" >取 消</el-button>
          <el-button type="primary" @click="submitForm">确 定</el-button>
        </div>
      </el-dialog>



      <el-dialog :title="editForm.dialogTitle" :visible.sync="editForm.dialogFormVisible" size="tiny">
        <el-form :model="formData" :inline="true"  label-position="left" >
          <el-form-item label="用户名：" :label-width="editForm.formLabelWidth">
            <el-input v-model="editData.user.userName" auto-complete="off"></el-input>
          </el-form-item>
        </el-form>

        <el-form :model="editData" :inline="true"  label-position="left" >
          <el-form-item label="状态：" :label-width="editForm.formLabelWidth">
            <el-switch
            v-model="editData.user.status"
            on-color="#13ce66"
            off-color="#ff4949"
            :on-value="0"
            :off-value="1">
          </el-switch>
        </el-form-item>
      </el-form>

        <div style="margin: 15px 0;"></div>
        <el-checkbox-group v-model="editData.roleIds">
          <el-checkbox v-for="role in roleList.list" :label="role.id" :key="role.id">{{role.name}}</el-checkbox>
        </el-checkbox-group>

        <div slot="footer" class="dialog-footer">
          <el-button @click="cancelEditFrom" >取 消</el-button>
          <el-button type="primary" @click="submitEditForm">确 定</el-button>
        </div>
      </el-dialog>    
</div>
</template>
<script>
export default {
        data() {
          return {
            formData:{
              user:{
                userName:'',
                status:0
              },
              roleIds:[]
            },
            editData:{
              user:{
                userName:'',
                status:0
              },
              roleIds:[]
            },
            editForm:{
              dialogTitle:'编辑用户',
              pTitleDisabled:true,
              dialogFormVisible: false,
              subEnterDisabled:false,
              formLabelWidth: '100px'
            },
            tableData: [],
            addForm:{
                dialogTitle:'新增用户',
                pTitleDisabled:true,
                dialogFormVisible: false,
                subEnterDisabled:false,
                 formLabelWidth: '100px'
            },
            page:{
                count:0,
                pageNo:1,
                pageSize:15,
                search:''
            },
            roleList:{
                list:[],
                count:0
            }
        }
    },
    methods:{
      handleEdit(index,row){
        this.getUserByName(row.userName);
        this.callEditForm();
      },
      handleIconClick(ev){
        this.getUser();
      },
      handleSelectionChange(val){
        // console.log(val)
      },
      handleDelete(index, row){
        this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
                //提交数据
                this.post("/auth/user/delete/"+row.id, {}, true, '数据提交中...', (result) => {
                  this.$notify_succ('操作成功')
                  this.init();
                }, true);
              }).catch(() => {
              // this.$notify_succ('已取消删除')
            });

            },
            formatter(row, column){
              if (0==row.status) {
                return (<span style="color:green">启用</span>);
              } else if (1==row.status){
                return (<span style="color:red">禁用</span>);
              }
            },
            handleSizeChange(val) {
              // console.log(`每页 ${val} 条`);

            },
            handleCurrentChange(val) {
              // console.log(`当前页: ${val}`);
              this.init(val);
            },
            cancelFrom(){
              this.addForm.dialogFormVisible = false;
            },
            callForm(){
              this.addForm.dialogFormVisible=true;
            },
            callEditForm(){
              this.editForm.dialogFormVisible=true;
            },
            cancelEditFrom(){
              this.editForm.dialogFormVisible = false;
            },
            submitForm(){
              this.addForm.dialogFormVisible = false;
              //提交数据
              this.post("/auth/user/insert", this.formData, true, '数据提交中...', (result) => {
                this.$notify_succ('新增成功')
                this.init();
              }, false);
              this.resetForm();
            },
            submitEditForm(){
              this.editForm.dialogFormVisible = false;
              // 提交数据
              this.post("/auth/user/update", this.editData, true, '数据提交中...', (result) => {
                this.$notify_succ('修改成功')
                this.resetEditForm();
                this.init();
              }, false);
            },
            getUser(){
              this.get("/auth/user/select_all", this.page, true, "", (result) => {
                this.tableData = result.data.userList;
                this.page.count = result.data.count;
              });
            },
            getUserByName(username){
              this.get("/auth/user/select", {"username":username}, true, "", (result) => {
                this.editData.user = result.data.user;
                this.editData.roleIds = result.data.roleIds;
              });
            },
            init() {
              this.getUser();
              this.get("/auth/role/select_all", this.page, true, "", (result) => {
                this.roleList.list = result.data.list;
                this.roleList.count = result.data.count;
              });
            },
            resetForm(){
              this.formData.userName='';
            },
            resetEditForm(){
              this.editData.userName='';
              this.editData.status=0;
              this.editData.roleIds=[];
            }
          },
          mounted() {
            this.init();
          }
}
</script>